<template>
  <div class="message" v-if="messageList.length">
    <Scroll
      class="msg-scroll"
      :data="messageList"
      :pullUp="true"
      :listenScroll="true"
      :probeType="3"
      @scrollToEnd="handleScrollToEnd"
    >
      <div class="msg-wrapper">
        <div class="panel-group" v-for="(item, index) of messageList" :key="index">
          <div class="date">{{item.date.split(' ')[0]}}</div>
          <div class="msg-panel" v-for="(secItem, secIndex) of item.list" :key="secIndex">
            <div class="left">
              <i>
                <b class="dot" v-if="!secItem.is_read"></b>
              </i>
            </div>
            <div class="right" @click="msgPanelClick(secItem, index)">
              <div class="top">
                <span class="tip">{{secItem.title}}</span>
                <span class="time">{{secItem.created_at.split(' ')[1]}}</span>
              </div>
              <div class="bottom" v-html="secItem.content"></div>
            </div>
          </div>
        </div>
      </div>
    </Scroll>
    <no-result v-if="!messageList.length" :src="require('@/assets/images/2-zwxx.png')" />
    <transition name="slide">
      <router-view @success="handleSuccess"></router-view>
    </transition>
  </div>
</template>
<script>
import Scroll from '@/components/scroll/scroll'
import NoResult from '@/components/no-result/no-result'
import { getMessageList } from '@/api/my'
// import EditMsg from '../my/mixins/edit-msg'
const ERR_OK = 200
export default {
  components: {
    Scroll,
    NoResult
  },
  // mixins: [EditMsg],
  data () {
    return {
      loadList: [],
      messageList: [],
      total: 0,
      page: 1,
      type: '',
      id: '',
      created_at: '',
      dateIndex: ''
    }
  },
  created () {
    if (localStorage.getItem('USER')) {
      this.type = JSON.parse(localStorage.getItem('USER')).identity_type
        ? 2
        : 1
      this._getMessageList(this.type, this.page)
    }
  },
  beforeRouteLeave (to, from, next) {
    // ...
    this.$emit('success')
    next()
  },
  methods: {
    handleSuccess () {
      console.log(this.created_at, this.id, this.messageList)
      const fIndex = this.messageList[this.dateIndex].list.findIndex(
        (item, index) => {
          return item.id === this.id
        }
      )
      if (fIndex >= 0) {
        this.messageList[this.dateIndex].list[fIndex].is_read = 1
      }
    },
    hasMore () {
      if (this.loadList.length === this.total) {
        this.isMore = false
      } else {
        this.isMore = true
      }
    },
    handleScrollToEnd () {
      this.page += 1
      if (this.isMore) {
        this._getMessageList(this.type, this.page).then(res => {
          if (res.data.data.length) {
            this.$notify({
              type: 'success',
              message: `已为您更新${res.data.data.length}条数据`,
              className: 'my-cls',
              duration: 1000
            })
          }
        })
      } else {
        this.$notify({
          type: 'warning',
          message: '没有更多内容了~',
          className: 'my-cls',
          duration: 1000
        })
      }
    },
    msgPanelClick (secItem, index) {
      this.id = secItem.id
      this.created_at = secItem.created_at.split(' ')[0]
      this.dateIndex = index
      if (
        secItem.params instanceof Object &&
        Object.keys(secItem.params).length
      ) {
        switch (secItem.params.type) {
          case 'designer':
            this.$router.push({
              path: '/my/message/designer',
              query: { information_id: secItem.id }
            })
            break
          case 'order':
            this.$router.push({
              path: '/my/message/order-detail',
              query: {
                orderId: secItem.params.order_id,
                information_id: secItem.id
              }
            })
            break
          case 'coupon':
            this.$router.push({
              path: '/my/coupon',
              query: {
                information_id: secItem.id,
                coupon_type: secItem.params.coupon_type
              }
            })
            break
        }
      } else {
        this.$router.push({
          path: '/my/message/msg-detail',
          query: { id: secItem.id }
        })
      }
    },
    _getMessageList (type, page) {
      return getMessageList(type, page)
        .then(res => {
          if (res.code === ERR_OK) {
            this.loadList = this.loadList.concat(res.data.data)
            const obj = {}
            const list = res.data.data
            for (let i = 0; i < list.length; i++) {
              if (obj[list[i].created_at.split(' ')[0]]) {
                obj[list[i].created_at.split(' ')[0]].push(list[i])
              } else {
                obj[list[i].created_at.split(' ')[0]] = [list[i]]
              }
            }
            const arr = []
            for (const i in obj) {
              arr.push({
                date: i,
                list: obj[i]
              })
            }
            this.messageList = this.messageList.concat(arr)
            this.total = res.data.total
            this.hasMore()
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
@include slideEnter();
.message {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  touch-action: none;
  z-index: 9;
  .msg-scroll {
    width: 100%;
    height: 100%;
  }
  .msg-wrapper {
    width: 100%;
    padding: 0 0.36rem 0.5rem 0.36rem;
    box-sizing: border-box;
    .panel-group {
      margin-top: 0.25rem;
      .date {
        line-height: 1.16rem;
        text-align: center;
        font-size: 0.22rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
      }
      .msg-panel {
        width: 100%;
        height: 2.12rem;
        background: rgba(250, 250, 250, 1);
        padding: 0.36rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border-left: 2px solid #000400;
        margin-bottom: 0.48rem;
        .left {
          height: 100%;
          i {
            display: inline-block;
            width: 0.32rem;
            height: 0.36rem;
            background: url("../../assets/images/xz.png") no-repeat;
            background-size: cover;
            vertical-align: top;
            position: relative;
            .dot {
              position: absolute;
              top: -0.1rem;
              right: -0.1rem;
              width: 0.1rem;
              height: 0.1rem;
              background: rgba(245, 83, 70, 1);
              border-radius: 50%;
            }
          }
        }
        .right {
          flex: 1;
          margin-left: 0.3rem;
          height: 100%;
          .top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .tip {
              font-size: 0.32rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: rgba(0, 4, 0, 1);
            }
            .time {
              font-size: 0.26rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
            }
          }
          .bottom {
            font-size: 0.22rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            line-height: 0.36rem;
            margin-top: 0.34rem;
          }
        }
      }
    }
  }
}
</style>
